<template>
  <div id="leftNav">
    <el-menu router default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>班级管理</span>
        </template>
        <el-menu-item index="/home/xkxClass">薛开兴班级管理</el-menu-item>
        <el-menu-item index="/home/jjyClass">蒋佳余班级管理</el-menu-item>
        <el-menu-item index="/home/djlClass">杜鉴霖班级管理</el-menu-item>
        <el-menu-item index="/home/ylClass">杨璐班级管理</el-menu-item>
        <el-menu-item index="/home/wtClass">王挺班级管理</el-menu-item>
        <el-menu-item index="/home/zxClass">张旭班级管理</el-menu-item>
        <el-menu-item index="/home/zhlClass">张慧玲班级管理</el-menu-item>
      </el-submenu>


      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>学生管理</span>
        </template>
        <el-menu-item index="/home/xkxStudent">星星学生管理</el-menu-item>
        <el-menu-item index="/home/jjyStudent">余余学生管理</el-menu-item>
        <el-menu-item index="/home/djlStudent">建建学生管理</el-menu-item>
        <el-menu-item index="/home/ylStudent">璐璐学生管理</el-menu-item>
        <el-menu-item index="/home/wtStudent">挺挺学生管理</el-menu-item>
        <el-menu-item index="/home/zxStudent">旭旭学生管理</el-menu-item>
        <el-menu-item index="/home/zhlStudent">玲玲学生管理</el-menu-item>
      </el-submenu>





      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'mynav',
  data() {
    return {
      navData: [
        { id: 1, path: '/home/student', name: '学生管理', isActive: true },
        { id: 2, path: '/home/student', name: '班级管理', isActive: false },
        { id: 3, path: '/home/student', name: '班级管理1', isActive: false },
        { id: 4, path: '/home/student', name: '班级管理2', isActive: false },
        { id: 5, path: '/home/student', name: '班级管理3', isActive: false },
      ],
      changeNum: 0
    }
  },
  methods: {
    changeNav(index) {
      this.changeNum = index
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang='less' scoped>
</style>